<template>
  <el-main>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名" width="140"></el-table-column>
      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
      <el-table-column prop="desc" label="描述"></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </el-main>
</template>
<script>
export default {
   data() {
      return {
        tableData: [],
        total:0,
        pageNumber:1,
        pageSize :5
      }
    },
     methods: {
      requestData(pageNumber,pageSize){
         console.log(pageNumber);

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.requestData(this.pageNumber,val)
      },
      handleCurrentChange(val) {
         this.requestData(val,this.pageSize)
        console.log(`当前页: ${val}`);
      }
      },
          
       mounted: function(){
         this.requestData(1,5)
          },

  };
</script>

